{% extends 'blog/base.html' %}

{% block navigation %}
<div class="box">
  <!-- 返回首页的按钮 -->
  <a class="button is-fullwidth is-link" href="{% url 'blog:index' %}" >
    <span class="icon">
      <i class="fas fa-arrow-left"></i> <!-- 返回图标 -->
    </span>
    <span>返回首页</span>
  </a>
</div>


<div class="box">
  <!-- 评论展示 -->
  <h2 class="subtitle">评论</h2>
  {% for comment in comments %}
    <div>
      <p><strong>{{ comment.user.username }}</strong> <small>{{ comment.created_at|date:"Y-m-d H:i" }}</small></p>
      <p>{{ comment.content }}</p>
    </div>
  {% empty %}
    <p>暂无评论</p>
  {% endfor %}
</div>

{% endblock %}



{% block content %}
<div class="box">
  <!-- 文章标题 -->
  <h1 class="title">{{ post.title }}</h1>

  <p><strong>作者：{{ post.owner }}</strong> <small>@浏览量：{{ post.pv }}</small> <small>发布日期：{{ post.add_date|date:"Y-m-d H:i" }}</small></p>
  
  <!-- 文章摘要 -->
  <div class="content">
    <p>{{ post.desc|safe }}</p>
  </div>

  <!-- 文章内容 -->
  <div class="content is-medium">
    <p>{{ post.content|safe }}</p>
  </div>
</div>

<div class="box">
  <div class="level">
    <div class="level-left">
      {% if prev_post %}
      <span>上一篇：</span
      ><a href="{% url 'blog:post_detail' prev_post.id %}" class="level-item"
        >{{ prev_post.title }}</a
      >
      {% else %}
      <span class="has-text-danger-dark is-size-7">无上一篇</span>
      {% endif %}
    </div>
    <div class="level-right">
      {% if next_post %}
      <span>下一篇：</span
      ><a href="{% url 'blog:post_detail' next_post.id %}" class="level-item"
        >{{ next_post.title }}</a
      >
      {% else %}
      <span class="has-text-danger-dark is-size-7">已经是最后一篇</span>
      {% endif %}
    </div>
  </div>
</div>


<div class="box">
  <!-- 评论表单 -->
  <h2 class="subtitle">发表评论</h2>
  <form method="post">
    {% csrf_token %}
    <div class="field">
      <label class="label">评论内容</label>
      <div class="control">
        {{ form.content }}
      </div>
    </div>
    <div class="field">
      <div class="control">
        <button type="submit" class="button is-link">提交评论</button>
      </div>
    </div>
  </form>
</div>

{% endblock %}
